<div class="layui-col-lg12" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
	<div class="layui-row" style="text-align: center;">
		<h1>权限管理</h1>
	</div>
	<div class="layui-row">
		<div class="layui-col-lg2">
			<ul id="ztree" class="ztree"></ul>
		</div>
		<div class="layui-col-lg10">
			<table id="permissionTab" class="layui-hide" lay-filter="permissionTab"></table>
		</div>
	</div>
</div>
<script type="text/html" id="toolbarBlock">
	<button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
	<button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
	<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
</script>
<script>
	layui.use([ 'form', 'table' ], function() {
		var form = layui.form, table = layui.table;
		table.render({
			elem : '#permissionTab',
			url : '/sys/permission/list',
			parseData : function(res) { //res 即为原始返回的数据
				return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
					"count" : res.data.total, //解析数据长度
					"data" : res.data.list
				//解析数据列表
				}
			},
			title : '权限数据表',
			cellMinWidth : 200,
			defaultToolbar : [ 'filter', 'print', 'exports' ],
			toolbar : '#toolbarBlock',
			cols : [ [ {
				type : 'checkbox',
				fixed : 'left'
			}, {
				field : 'id',
				title : 'ID',
				hide : true,
				width : 80
			}, {
				field : 'name',
				title : '权限名称',
			}, {
				field : 'keyword',
				title : '权限关键字',
			}, {
				field : 'description',
				title : '权限描述'
			} ] ],
			page : true
		});
		table.on('toolbar(permissionTab)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			var data = checkStatus.data;
			switch (obj.event) {
			case 'add':
				layer.open({
					type : 2,
					title : '新增权限',
					offset : 'auto',
					area : [ '60%', '80%' ],
					content : '/sys/permissionAdd'
				});
				break;
			case 'delete':
				if (data.length != 1) {
					layer.msg("请选择一条数据");
					return;
				}
				utils.ajaxUrl("/sys/permission/" + data[0].id, {}, "DELETE", function(res) {
					if (res.code == 0) {
						table.reload('permissionTab');
						layer.msg("删除成功!");
						initztree();
					} else {
						layer.msg(res.msg);
					}
				});
				break;
			case 'update':
				if (data.length != 1) {
					layer.msg("请选择一条数据");
					return;
				}
				layer.open({
					type : 2,
					title : '修改权限',
					offset : 'auto',
					area : [ '60%', '80%' ],
					content : '/sys/permissionEdit?id=' + data[0].id
				});
				break;
			}
		});
	});
</script>
<script type="text/javascript">
	initztree();
	function initztree() {
		var ztreeData, zTreeObj, setting = {
			view : {
				selectedMulti : false,
				fontCss : {
					'font-size' : "25px",
					'height' : '25px'
				}
			},
			check : {
				enable : false,
				chkboxType : {
					"Y" : "ps",
					"N" : "ps"
				}
			},
			data : {
				simpleData : {
					enable : false
				}
			},
			callback : {
				onClick : zTreeOnClick
			}
		};
		function zTreeOnClick(event, treeId, treeNode) {
			event.preventDefault();//阻止默认事件
			return false;
		}
		$.get("/sys/permission/ztree", function(res) {
			var ztreeData = res.data;
			zTreeObj = $.fn.zTree.init($("#ztree"), setting, ztreeData);
		});
	}
</script>